<template>
  <div class="app-container">
    <h1 class="text-center my-4">Bootstrap5 布局展示</h1>
    <BootstrapLayoutDemo />
  </div>
</template>

<script setup>
import BootstrapLayoutDemo from "../../components/BootStrap/index.vue";

// export default {
//   name: "App",
//   components: {
//     BootstrapLayoutDemo,
//   },
// };
</script>

<style>
.app-container {
  max-height: 83vh;
  overflow-y: auto;
  background-color: #f8f9fa;
  padding-bottom: 30px;
}

/* 添加一些全局过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
